<!-- 添加用户模态框 -->
<div id="addModal" class="fixed inset-0 bg-gray-900 bg-opacity-60 backdrop-blur-sm flex items-center justify-center hidden z-50">
    <div class="bg-white p-8 rounded-xl shadow-2xl max-w-3xl w-full mx-4 border border-gray-100">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-4 border-gray-100">添加新用户</h2>
        <form id="addUserForm" action="AddUser.php" method="POST" class="space-y-6">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="username" class="block text-sm font-semibold text-gray-700 mb-2">用户名 <span class="text-red-500">*</span></label>
                    <input type="text" id="username" name="username"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                </div>
                <div>
                    <label for="realName" class="block text-sm font-semibold text-gray-700 mb-2">真实姓名 <span class="text-red-500">*</span></label>
                    <input type="text" id="realName" name="realName"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">密码 <span class="text-red-500">*</span></label>
                    <input type="text" id="password" name="password"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                </div>
                <div>
                    <label for="phone" class="block text-sm font-semibold text-gray-700 mb-2">手机号 <span class="text-red-500">*</span></label>
                    <input type="text" id="phone" name="phone"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-6">

                    <div>
                        <label for="role" class="block text-sm font-semibold text-gray-700 mb-2">权限 <span class="text-red-500">*</span></label>
                        <select id="role" name="role"
                                class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500 appearance-none">
                            <option value="0" selected>读者</option>
                            <option value="1">管理员</option>
                        </select>
                    </div>
                </div>
                <div class="space-y-6">
                    <div>
                        <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">邮箱 <span class="text-red-500">*</span></label>
                        <input type="text" id="email" name="email"
                               class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                    </div>
                </div>
            </div>

            <div class="flex justify-end gap-4 pt-4 border-t border-gray-100">
                <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors shadow-sm">
                    确认添加
                </button>
                <button type="button" id="closeAddModal" class="px-6 py-2.5 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                    取消
                </button>
            </div>
        </form>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const addBtn = document.getElementById('addUserBtn');
        const modal = document.getElementById('addModal');
        const closeBtn = document.getElementById('closeAddModal');

        // 显示模态框
        addBtn && addBtn.addEventListener('click', () => modal.classList.remove('hidden'));

        // 关闭模态框
        closeBtn.addEventListener('click', () => modal.classList.add('hidden'));
        modal.addEventListener('click', (e) => {
            if (e.target === modal) modal.classList.add('hidden');
        });
    });
</script>